<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <title>FlyProduct</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css" href="/public/bootstrap/css/bootstrap-responsive.min.css">
    <link rel="stylesheet" type="text/css" href="/public/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/public/bootstrap/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        document.onkeyup = KeyCheck;  //or however you are calling your method
        function KeyCheck()
        {
            checkImageList();
        }
    </script>
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }
    </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->



</head>    
<body>
    <?php if ($this->error == 1): ?>
        <div class="alert alert-success">
            Insert done.
        </div>
    <?php elseif ($this->error == -110): ?>
        <div class="alert alert-error">
            Insert fail, please check your data.
        </div>
    <?php endif; ?>
    <?php echo $this->render('tool/navmenu.phtml') ?>

    <div class="container-fluid">
        <div class="span9">
            <legend>Input new video</legend>
            <form  class="form-horizontal" action="/public/tool/insertvideo" method="post" id="videoform">
                <div class="control-group">
                    <label class="control-label">Video name</label>
                    <div class="controls">
                        <input style="width:100%" type="text" id="title" name="title" value="" placeholder="Enter video's name">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Video avatar</label>
                    <div class="controls">
                        <input style="width:100%" type="text" id="thumb" name="thumb" value="" placeholder="Enter thumb, please don't input if your link is youtube"/>
                     </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Image preview</label>
                    <div class="controls">
                        <img id="imageViews" style="width: 50px; height: 50px; padding: 3px" />
                    </div>
                </div> 
                <div class="control-group">
                    <label class="control-label">Video type</label>
                    <div class="controls">
                        <select name="video_type" form="videoform">
                            <option value="1">Short Clip</option>
                            <option value="2">Music Video</option>
                            <option value="3">Film</option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Link</label>
                    <div class="controls">
                        <input style="width:100%" type="text" id="link" name="link" placeholder="Enter your link">
                    </div>
                </div>               
                <div class="control-group">
                    <div class="pull-right">
                        <button type="submit" class="btn btn-primary">Insert this video</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">        
        function checkImageList(){
            var imageList = document.getElementById('link').value;
            var imageViews = document.getElementById('imageViews');
            if(imageList.indexOf('youtube') != -1 || imageList == ''){
                if(imageList == ''){
                    imageViews.setAttribute("src", "");
                    document.getElementById('thumb').setAttribute("value", "");
                    return;
                }
                var n = imageList.split("?v=");            
                var divChild = 'http://i1.ytimg.com/vi/'+n[1]+'/mqdefault.jpg';            
                imageViews.setAttribute("src", divChild);
                document.getElementById('thumb').setAttribute("value", divChild);
            } else {
                imageViews.setAttribute("src", imageList);
            }
        }
    </script>
</body>
</html>

